<template>
  <div class="about">
    <div style="padding:20px 0px;box-sizing: border-box;padding-bottom: 0;">
      <div class="feedback">
        <div class="feedback_form" :style="$store.getters.screenWidth ? 'width:100%' : ''">
          <el-form
            :model="ruleForm"
            label-position="left"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item prop="content" label="反馈内容">
              <el-input type="textarea" v-model="ruleForm.content" placeholder="反馈内容"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input placeholder="请填写邮箱号" v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="telphone">
              <el-input placeholder="请填写手机号" v-model="ruleForm.telphone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')">提交信息</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import imageText from "../components/imageText";
import footerPart from "../views/footer";
import { adviceAdd } from "../api/api";
export default {
  data() {
    return {
      activeName: "fourth",
      ruleForm: {
        addTime: "",
        content: "",
        email: "",
        id: 0,
        isDel: 0,
        telphone: ""
      },
      rules: {
        content: [
          { required: true, message: "请输入反馈内容", trigger: "blur" }
        ],
        telphone: [
          { required: true, message: "请输入电话号码", trigger: "blur" }
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }]
      }
    };
  },
  components: {
    imageText,
    footerPart
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            await adviceAdd(this.ruleForm);
            this.$notify.success({
              title: "成功",
              message: "提交成功！"
            });
            this.$router.go(-1);
          } catch {
            this.$notify.error({
              title: "失败",
              message: "提交失败！"
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClick(tab) {
      switch (tab.index) {
        case "0":
          this.$router.push("/About");
          break;
        case "1":
          this.$router.push("/contant");
          break;
        case "2":
          this.$router.push("/Join");
          break;
        case "3":
          this.$router.push("/feedback");
          break;
      }
    }
  }
};
</script>
<style>
.el-tabs__nav-wrap::after {
  width: 0;
}
.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

.feedback {
  width: 100%;
  padding: 20px;
  background: hsl(0, 0%, 94%);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.feedback_form {
  width: 60%;
  padding: 30px;
  box-sizing: border-box;
  background-color: #fff;
}
</style>